<template>
    <div class="item">
      <el-button @click="toHome" class="toHome">返回首页</el-button>
      <div class="img">
        <img src="../../assets/defalut_cover.jpg" alt="图书图片">
      </div>
      <div class="info">
        <el-form ref="form" :model="bookInfo" label-width="80px" :inline="false">
          <el-form-item label="书名">
            <span>{{ bookInfo.bName }}</span>
          </el-form-item>
          <el-form-item label="作者">
            <span>{{ bookInfo.bAuthor }}</span>
          </el-form-item>
          <el-form-item label="出版社">
            <span>{{ bookInfo.bPublish }}</span>
          </el-form-item>
          <el-form-item label="类别">
            <span>{{ bookInfo.bookSituation.typeName }}</span>
          </el-form-item>
          <el-form-item label="图书位置">
            <span>{{ bookInfo.bookSituation.bSituation }}</span>
          </el-form-item>
          <el-form-item label="借阅">
              <el-button v-if="bookInfo.bCount === 0" @click="bookReverse">预定</el-button>
              <el-button v-if="bookInfo.bCount !== 0" @click="bookBorrow">借阅</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>

  import { getbookName,getbookType } from "../../utils/cacheProcessing"
  import { bookSearch } from "../../api/bookSearch";
  import { bookBorrow,bookReverse } from "../../api/bookBorrow"
  import { getUserInfo } from "../../api/list"
  import { getuserName } from "../../utils/cacheProcessing";

  export default {
        name: "bookBorrow",
      data(){
          return{
            imgUrl:"",
            bookInfo:{
              bName:"书名",
              bAuthor:"作者",
              bPublish:"出版社",
              bCount:0,
              bId:0,
              bookSituation:{
                typeName:"类别名字",
                bSituation:"图书位置"
              }
            },
          }
      },
      created(){
          this.getBookInfo()
      },
      methods:{
          getBookInfo(){
            let requestData = {
              bookName:getbookName(),
              bookType:getbookType()
            }
            bookSearch(requestData).then(res=>{
              this.bookInfo = res.data.data[0]
              this.imgUrl = 'http://47.115.62.124:8080/img/'+res.data.data[0].bImg
            }).catch(err=>{
              console.log(err);
            })
          },
        toHome(){
            this.$router.push('/home')
        },
        bookReverse(){
          this.confirm({
            content: "确认借阅该图书?",
            fn: ()=>{
              if(!getuserName()){
                this.$messageOK("warning","当前未登录账号，请先登录")
                return new Error()
              }
              let requestData = {
                username: getuserName(),
              }
              getUserInfo(requestData).then(res=>{
                console.log(res);
                let data = {
                  userId:res.data.data.uId,
                  bookId:this.bookInfo.bId
                }
                bookReverse(data).then(res=>{
                  this.$messageOK("success", "借阅成功");
                })
              }).catch(err=>{
                this.$messageOK("warning", "借阅失败！");
              })
            },
            catchfn: () => {

            }
          });
        },
        bookBorrow(){
          this.confirm({
            content: "确认借阅该图书?",
            fn: ()=>{
              if(!getuserName()){
                this.$messageOK("warning","当前未登录账号，请先登录")
                return new Error()
              }
              let requestData = {
                username: getuserName(),
              }
              getUserInfo(requestData).then(res=>{
                let data = {
                  userId:res.data.data.uId,
                  bookId:this.bookInfo.bId
                }
                bookBorrow(data).then(res=>{
                  this.$messageOK("success", "借阅成功");
                })
              }).catch(err=>{
                this.$messageOK("warning", "借阅失败！");
              })
            },
            catchfn: () => {

            }
          });
        }
      }
    }
</script>

<style lang="scss" scoped>
  .item{
    position: absolute;
    div{
    }
  }
.img{
  margin-top: 150px;
  margin-left: 250px;
  float: left;
  img{
    height: 400px;
  }
}
  .info{
    margin-left: 50px;
    margin-top: 150px;
    float: left;
  }
  .toHome{
    float: left;
    margin-top:20px ;
    margin-left:20px ;
  }

</style>
